import React, { Component } from 'react';
import { connect } from 'react-redux'
import { RecommendWrapper, Item, Download, Enlargement } from '../style'

class Recommend extends Component {
    constructor() {
        super()
        this.state = {
            show: false
        }
    }
    open = () => {
        this.setState({
            show: true
        })
    }
    hide = () => {
        this.setState({
            show: false
        })
    }
    render () {
        let { recommendList } = this.props
        return (
            <RecommendWrapper>
                {
                    recommendList.map(item => {
                        return <Item imgUrl={item.get('imgUrl')} key={item.get('id')}></Item>
                    })
                }
                <Download onMouseEnter={this.open} onMouseLeave={this.hide}>
                    <img className="code_img" src="https://cdn2.jianshu.io/assets/web/download-index-side-qrcode-4130a7a6521701c4cb520ee6997d5fdb.png" alt="" />
                    <div className="info">
                        <div className="title">下载简书手机App </div>
                        <div className="subTitle">随时随地发现和创作内容</div>
                    </div>
                    {this.state.show ? (
                        <Enlargement>
                            <img src="https://cdn2.jianshu.io/assets/web/download-index-side-qrcode-4130a7a6521701c4cb520ee6997d5fdb.png" alt="" />
                        </Enlargement>
                    ) : null
                    }
                </Download>
            </RecommendWrapper>
        );
    }
}

const mapState = (state) => {
    return {
        recommendList: state.getIn(['home', 'recommendList'])
    }
}

export default connect(mapState, null)(Recommend);